{% extends "base.html" %}

{% block title %}路演工具 - {{ project.name }} - 开源安全创意工坊{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h3 class="mb-0"><i class="fas fa-file-pdf"></i> 路演工具 - {{ project.name }}</h3>
            </div>
            <div class="card-body">
                <form id="roadshowForm">
                    <div class="mb-3">
                        <label for="projectOverview" class="form-label">项目概述</label>
                        <textarea class="form-control" id="projectOverview" rows="3" 
                                  placeholder="用简洁的语言描述你的项目核心价值和创新点">{{ project.description }}</textarea>
                        <div class="form-text">这是路演中最重要的部分，要突出项目的独特价值</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="problemStatement" class="form-label">解决的问题</label>
                        <textarea class="form-control" id="problemStatement" rows="3" 
                                  placeholder="描述你的项目要解决的具体安全问题"></textarea>
                        <div class="form-text">说明为什么这个问题值得解决，以及现有解决方案的不足</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="solution" class="form-label">解决方案</label>
                        <textarea class="form-control" id="solution" rows="3" 
                                  placeholder="详细说明你的解决方案和技术实现"></textarea>
                        <div class="form-text">解释你的项目如何解决这个问题，使用了哪些关键技术</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="marketAnalysis" class="form-label">市场分析</label>
                        <textarea class="form-control" id="marketAnalysis" rows="3" 
                                  placeholder="分析目标用户群体和市场前景"></textarea>
                        <div class="form-text">谁需要你的产品？市场规模有多大？</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="competitiveAdvantage" class="form-label">竞争优势</label>
                        <textarea class="form-control" id="competitiveAdvantage" rows="3" 
                                  placeholder="相比竞争对手，你的优势在哪里？"></textarea>
                        <div class="form-text">技术壁垒、团队优势、先发优势等</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="businessModel" class="form-label">商业模式</label>
                        <textarea class="form-control" id="businessModel" rows="3" 
                                  placeholder="如何盈利？如何持续发展？"></textarea>
                        <div class="form-text">开源项目也可以有商业模式，比如服务收费、企业版等</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="teamIntroduction" class="form-label">团队介绍</label>
                        <textarea class="form-control" id="teamIntroduction" rows="3" 
                                  placeholder="介绍你的团队背景和优势">{% if project.team_members %}{% set members = project.team_members|fromjson %}团队成员：{{ '、'.join(members) }}{% endif %}</textarea>
                        <div class="form-text">突出团队的技术能力和执行力</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="futurePlans" class="form-label">未来规划</label>
                        <textarea class="form-control" id="futurePlans" rows="3" 
                                  placeholder="项目的下一步发展计划和里程碑"></textarea>
                        <div class="form-text">展示你对项目未来发展的思考和规划</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="fundingNeeds" class="form-label">资金需求（可选）</label>
                        <textarea class="form-control" id="fundingNeeds" rows="2" 
                                  placeholder="如果需要融资，说明资金用途和预期回报"></textarea>
                        <div class="form-text">如果需要投资，说明需要多少资金，用于什么用途</div>
                    </div>
                    
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="button" class="btn btn-outline-primary me-md-2" onclick="generateRoadshowScript()">
                            <i class="fas fa-file-alt"></i> 生成路演稿
                        </button>
                        <button type="button" class="btn btn-success" onclick="generatePoster()">
                            <i class="fas fa-file-pdf"></i> 生成海报
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 生成的路演稿预览 -->
        <div class="card mt-4" id="roadshowScript" style="display: none;">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-file-alt"></i> 路演稿预览</h5>
            </div>
            <div class="card-body">
                <div id="scriptContent" class="p-3 bg-light rounded"></div>
                <div class="mt-3">
                    <button class="btn btn-outline-primary" onclick="copyScript()">
                        <i class="fas fa-copy"></i> 复制路演稿
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 侧边栏 -->
    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0"><i class="fas fa-info-circle"></i> 路演指南</h5>
            </div>
            <div class="card-body">
                <h6>3分钟路演结构建议：</h6>
                <ol class="small">
                    <li><strong>开场 (30秒)</strong>：项目介绍和团队展示</li>
                    <li><strong>问题 (45秒)</strong>：描述要解决的安全问题</li>
                    <li><strong>解决方案 (60秒)</strong>：详细介绍你的解决方案</li>
                    <li><strong>市场 (30秒)</strong>：市场规模和用户需求</li>
                    <li><strong>竞争优势 (30秒)</strong>：相比竞品的优势</li>
                    <li><strong>结尾 (15秒)</strong>：总结和呼吁行动</li>
                </ol>
                
                <h6 class="mt-3">演讲技巧：</h6>
                <ul class="small">
                    <li>保持自信和热情</li>
                    <li>用数据支撑你的观点</li>
                    <li>展示产品demo（如果有）</li>
                    <li>准备回答常见问题</li>
                    <li>练习控制时间</li>
                </ul>
            </div>
        </div>

        <div class="card">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0"><i class="fas fa-lightbulb"></i> 成功要素</h5>
            </div>
            <div class="card-body">
                <h6>投资人关注的重点：</h6>
                <ul class="small">
                    <li><strong>团队能力</strong>：是否有技术背景和相关经验</li>
                    <li><strong>市场机会</strong>：问题是否足够重要</li>
                    <li><strong>解决方案</strong>：技术是否可行和有创新性</li>
                    <li><strong>商业模式</strong>：如何赚钱和规模化</li>
                    <li><strong>竞争优势</strong>：为什么你们能成功</li>
                    <li><strong>执行力</strong>：是否有具体的实施计划</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function generateRoadshowScript() {
    const formData = {
        overview: document.getElementById('projectOverview').value,
        problem: document.getElementById('problemStatement').value,
        solution: document.getElementById('solution').value,
        market: document.getElementById('marketAnalysis').value,
        advantage: document.getElementById('competitiveAdvantage').value,
        business: document.getElementById('businessModel').value,
        team: document.getElementById('teamIntroduction').value,
        future: document.getElementById('futurePlans').value,
        funding: document.getElementById('fundingNeeds').value
    };
    
    // 生成路演稿
    let script = `# {{ project.name }} - 项目路演稿\n\n`;
    script += `**项目概述：**\n${formData.overview || project.description}\n\n`;
    
    if (formData.problem) {
        script += `**解决的问题：**\n${formData.problem}\n\n`;
    }
    
    if (formData.solution) {
        script += `**解决方案：**\n${formData.solution}\n\n`;
    }
    
    if (formData.market) {
        script += `**市场分析：**\n${formData.market}\n\n`;
    }
    
    if (formData.advantage) {
        script += `**竞争优势：**\n${formData.advantage}\n\n`;
    }
    
    if (formData.business) {
        script += `**商业模式：**\n${formData.business}\n\n`;
    }
    
    if (formData.team) {
        script += `**团队介绍：**\n${formData.team}\n\n`;
    }
    
    if (formData.future) {
        script += `**未来规划：**\n${formData.future}\n\n`;
    }
    
    if (formData.funding) {
        script += `**资金需求：**\n${formData.funding}\n\n`;
    }
    
    script += `---\n**演讲时间建议：** 3分钟\n**重点强调：** 创新性、技术可行性、市场潜力、团队能力`;
    
    // 显示路演稿
    document.getElementById('scriptContent').innerHTML = script.replace(/\n/g, '<br>');
    document.getElementById('roadshowScript').style.display = 'block';
    
    // 滚动到路演稿
    document.getElementById('roadshowScript').scrollIntoView({ behavior: 'smooth' });
}

function copyScript() {
    const scriptContent = document.getElementById('scriptContent').innerText;
    navigator.clipboard.writeText(scriptContent).then(() => {
        alert('路演稿已复制到剪贴板！');
    }).catch(err => {
        console.error('复制失败:', err);
        alert('复制失败，请手动复制');
    });
}

function generatePoster() {
    // 直接下载PDF海报
    window.open(`/api/generate_poster/{{ project.id }}`, '_blank');
}

// 自动保存表单数据到localStorage
document.addEventListener('input', function(e) {
    if (e.target.tagName === 'TEXTAREA') {
        localStorage.setItem(e.target.id, e.target.value);
    }
});

// 页面加载时恢复表单数据
window.addEventListener('load', function() {
    const formIds = [
        'projectOverview', 'problemStatement', 'solution', 'marketAnalysis',
        'competitiveAdvantage', 'businessModel', 'teamIntroduction',
        'futurePlans', 'fundingNeeds'
    ];
    
    formIds.forEach(id => {
        const savedValue = localStorage.getItem(id);
        if (savedValue) {
            document.getElementById(id).value = savedValue;
        }
    });
});
</script>
{% endblock %}
